<script lang="ts">
    import { onMount } from 'svelte';
    // import { get, post } from '../../utils/api';
    // import { addToast } from '../../stores/toastStore';
    import Header from '../../components/common/Header.svelte';
    import CreateHeader from '../../components/audio-synthesis/CreateHeader.svelte';

    onMount(() => {
    });
</script>

<main>
    <Header />
    <CreateHeader />
    <div class="flex px-8 py-4 space-x-8">
        <div class="flex-1 bg-white rounded shadow p-4">
            <div class="flex space-x-4 mb-4">
                <button class="bg-gray-200 rounded-full px-4 py-2">AI帮我写</button>
                <button class="bg-gray-200 rounded-full px-4 py-2">随机故事</button>
                <button class="bg-gray-200 rounded-full px-4 py-2">上传TXT</button>
                <button class="bg-gray-200 rounded-full px-4 py-2">翻译</button>
            </div>
            <textarea class="w-full h-64 border rounded p-2" placeholder="请输入文本..."></textarea>
            <div class="text-right text-gray-500 mt-2">0/1000</div>
        </div>
        <div class="w-1/3 bg-white rounded shadow p-4">
            <h2 class="text-lg font-semibold">声音类型</h2>
            <div class="flex flex-wrap space-x-2 mb-4">
                <button class="px-2 py-1 text-green-600 border-b-2 border-green-600">全部</button>
                <button class="px-2 py-1 text-gray-700">热门</button>
                <button class="px-2 py-1 text-gray-700">男声</button>
                <button class="px-2 py-1 text-gray-700">女声</button>
            </div>
            <div class="grid grid-cols-3 gap-4">
                <div class="text-center">
                    <img src="avatar.png" alt="avatar" class="w-12 h-12 mx-auto rounded-full">
                    <p class="text-sm">自定义克隆</p>
                </div>
            </div>
            <div class="mt-4">
                <label class="block text-gray-700">语速设置</label>
                <input type="range" class="w-full">
            </div>
            <div class="mt-4">
                <label class="block text-gray-700">音量设置</label>
                <input type="range" class="w-full">
            </div>
            <button class="bg-green-600 w-full text-white py-2 rounded mt-4">开始转换</button>
        </div>        
    </div>
</main>
